<template>
  <div class='homePage'>
    <Navigation />
    <h3 class='mb20'>
      以下是一些常用的英语句型及其对应的示例，按照使用频率排列，帮助母语非英语的人快速熟练地使用英语：
    </h3>


    <ul class='baseUl'>
      <li>
        <strong>1. 简单陈述句 (Simple Declarative Sentence)</strong>
        <ul class='pl30'>
          <li>
            句型: 主语 + 动词 + 其他
          </li>
          <li>
            示例:
            <ul class='pl30'>
              <li>She likes pizza. (她喜欢披萨。)</li>
              <li>They are students. (他们是学生。)</li>
              <li>He has a car. (他有一辆车。)</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>


    <!-- 翻译页面 -->
    <el-dialog class='dialogWrap' v-model="fn.dlgVisible" :title="fn.dlgTitle" width="99%" height="100%" top='10px'>
      <iframe class='iframe' :src='fn.iframeUrl'></iframe>

      <template #footer>
        <span class="dialog-footer">
          <el-button style='width: 100%' type="primary" @click="fn.dlgVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script setup lang="ts">
import {ref, unref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import Navigation from '@/template/Navigation.vue'

const router = useRouter()


const fn = reactive({
  dlgTitle:'必应词典',
  dlgVisible: false,
  iframeUrl: 'https://www.bing.com/dict/search?q=hello&cc=cn#',
  speak (text:any) {
    // const msg = new SpeechSynthesisUtterance(text)
    // window.speechSynthesis.speak(msg);

    fn.dlgVisible = true
    fn.dlgTitle = '必应词典'
    fn.iframeUrl = `https://www.bing.com/dict/search?q=${text}&cc=cn#`
  },

  longPress(text:any){
    // console.log('text', text)

    fn.dlgVisible = true
    fn.dlgTitle = 'baidu 翻译'
    // fn.iframeUrl = `https://www.deepl.com/zh/translator#en/zh/${text}`
    // fn.iframeUrl = `https://fanyi.baidu.com/mtpe-individual/multimodal?query=${text}%0A&lang=en2zh`

    const str = text.replace(/_/gi, " ");
    fn.iframeUrl = `https://fanyi.baidu.com/#en/zh/${str}`
  },

  gotoAnchor(index){
    const element = document.querySelector(`#AnchorTit${index}`);
    // console.log('element', `#AnchorTit${index}`, element)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  },

  popoverVisible: false,
  beforeEnter(){
    console.log(111)
    fn.popoverVisible = true
  },
  beforeLeave(){
    console.log(222)
    fn.popoverVisible = false
  },
})

</script>


<style lang='stylus'>

.baseUl{
  margin-left: 30px
  padding-left:20px
  line-height: 40px

  li{
    list-style-type: disc;
  }
  >li{
    list-style-type: none;
  }
}
</style>
